<!-- 调整列表 -->
<template>
  <div class="DealerInfoStyle">
    <div class="cardAdmin">
      <div class="formContainer">
        <div class="formSearch">
          <span
            style="padding: 0 10px; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">名称：</span>
          <el-input style="flex: 3;" v-model="form.admin_name"></el-input>
        </div>
        <div style="position: absolute;left: 10px;bottom: 5px;">
          <el-button type="success" icon="el-icon-circle-plus-outline" size="small" @click="addbtn()">新增股票调整</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <el-table :data="CompanyTable" border style="width: 100%;min-height: 78%;max-height: 78%;overflow: auto;">
      <el-table-column resizable prop="recent_adjustment_id" label="id" width="60" align="center">
      </el-table-column>

      <el-table-column resizable prop="Stocks" label="股票名称" width="auto" min-width="250px" align="center">
      </el-table-column>
      <el-table-column resizable prop="sort" label="排序" width="auto" min-width="100px" align="center">
      </el-table-column>
      <el-table-column resizable prop="Current_Price" label="当前价格" width="auto" min-width="250px" align="center">
      </el-table-column>
      <el-table-column resizable prop="Adjustment_Date" label="加入日期" width="auto" min-width="250px" align="center">
      </el-table-column>
      <el-table-column resizable prop="Buy_or_Sell" label="买卖操作" width="auto" min-width="250px" align="center">
      </el-table-column>
      <el-table-column resizable prop="HPY_Since_Joining_Date" label="加入日期以来持有期收益率" width="auto" min-width="250px"
        align="center">
      </el-table-column>
      <el-table-column resizable prop="Volumn" label="成交量" width="auto" min-width="250px" align="center">
      </el-table-column>

      <el-table-column resizable prop="add_time" label="添加时间" width="auto" min-width="250px" align="center">
      </el-table-column>

      <el-table-column resizable label="操作" width="150"  align="center">
        <template slot-scope="scope">
          <el-button @click="tableEditing(scope.row)" type="primary" plain size="small">编辑</el-button>
          <el-button @click="del_adjustViewDelete(scope.row.recent_adjustment_id)" type="danger" plain
            size="small">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="text-align: right; margin-top: 5px;">
      <el-pagination background layout="prev, pager, next,total" :total="total" :page-size="pagesize"
        @current-change="current_change"></el-pagination>
    </div>

    <!-- 弹窗 -->
    <el-dialog  :close-on-click-modal="false" :title="titles" :visible.sync="dialogVisible" width="70%" @close="handleClose" top="15vh">
      <div class="pop-up-form">
        <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
          <div style="flex: 1;display: flex;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">股票名称：</span>
            <el-input style="flex: 6;" v-model="addform.Stocks"></el-input>

          </div>
          <div style="display: flex;flex: 1;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">当前价格：</span>
            <el-input style="flex: 6;" v-model="addform.Current_Price"></el-input>
          </div>
        </div>

        <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
          <div style="display: flex;flex: 1;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">调整日期：</span>
            <el-date-picker style="flex: 6;" v-model="addform.Adjustment_Date" type="datetime" placeholder="请选择调整日期"
              :format="'yyyy-MM-dd HH:mm:ss'" :value-format="'yyyy-MM-dd HH:mm:ss'">
            </el-date-picker>
          </div>
          <div style="flex: 1;display: flex;">
            <span
              style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 12px;">加入日期以来持有期收益率：</span>
            <el-input style="flex: 6;" v-model="addform.HPY_Since_Joining_Date"></el-input>
          </div>
        </div>

        <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
          <div style="flex: 1;display: flex;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">买卖操作：</span>
            <el-input style="flex: 6;" v-model="addform.Buy_or_Sell"></el-input>
          </div>
          <div style="display: flex;flex: 1;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">成交量：</span>
            <el-input style="flex: 6;" v-model="addform.Volumn"></el-input>
          </div>
        </div>
        <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
          <div style="flex: 1;display: flex;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">序号：</span>
            <el-input style="flex: 6;" v-model="addform.sort"></el-input>
          </div>
          <div style="display: flex;flex: 1;">
          <!-- <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">成交量：</span>
                    <el-input style="flex: 6;" v-model="addform.Volumn"></el-input> -->
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button v-show="titles == '新增'" type="primary" @click="add_adjustViewAdd()" size="small">确
          定</el-button>
        <el-button v-show="titles == '编辑'" type="primary" @click="upd_adjustViewEdit()" size="small">更
          新</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { adjustTheViewingList, adjustViewAdd, adjustViewEdit, adjustViewDelete } from "@/utils/api";
export default {
  name: 'CompanyInfo',
  data() {
    return {
      form: {
        admin_name: ''
      },
      addform: {
        Stocks: '',
        Current_Price: '',
        Adjustment_Date: '',
        Buy_or_Sell: '',
        Volumn: '',
        HPY_Since_Joining_Date: '',
        sort: '',

      },
      CompanyTable: [],
      enableData: [{
        value: 0,
        label: '未使用'
      }, {
        value: 1,
        label: '已使用'
      }],
      dialogVisible: false,
      total: 100, //总条数
      pagesize: 10, //指定展示多少条
      currentPage: 1, //当前页码
      titles: '',

    };
  },
  mounted() {
    this.get_adjustTheViewingList()
  },

  methods: {
    // 查询股票调整记录列表
    async get_adjustTheViewingList() {
      let data = JSON.parse(JSON.stringify(this.form));
      data.page = this.currentPage

      // 删除值为 "" 或 null 的字段
      Object.entries(data).forEach(([key, value]) => {
        if (value === "" || value === null) {
          delete data[key];
        }
      });

      const res = await adjustTheViewingList(data).catch((err) => {
        return console.error(err);
      });
      if (res && res.status == "200") {
        this.$message.success(res.data.message);
        this.CompanyTable = res.data.data.data
        this.total = res.data.data.total
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 新增股票调整记录
    async add_adjustViewAdd() {
      let data = new FormData();
      const fields = {
        'Stocks': this.addform.Stocks,
        'Current_Price': this.addform.Current_Price,
        'Adjustment_Date': this.addform.Adjustment_Date,
        'Buy_or_Sell': this.addform.Buy_or_Sell,
        'Volumn': this.addform.Volumn,
        'HPY_Since_Joining_Date': this.addform.HPY_Since_Joining_Date,
        'sort': this.addform.sort,

      };


      // 遍历对象并只添加有效字段
      Object.entries(fields).forEach(([key, value]) => {
        // 判断字段值是否为空、null或undefined
        if (value !== undefined && value !== null && value !== '') {
          data.append(key, value);
        }
      });

      if (this.roleHeadgear) {
        data.append('Price_Movement', this.roleHeadgear);
      }

      const res = await adjustViewAdd(data).catch((err) => {
        return console.error(err);
      });
      if (res && res.status == "200") {
        this.$message.success(res.data.message);
        this.get_adjustTheViewingList()

        this.dialogVisible = false
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 更新股票调整记录
    async upd_adjustViewEdit() {

      let data = new FormData();
      const fields = {
        'Stocks': this.addform.Stocks,
        'Current_Price': this.addform.Current_Price,
        'Adjustment_Date': this.addform.Adjustment_Date,
        'Buy_or_Sell': this.addform.Buy_or_Sell,
        'Volumn': this.addform.Volumn,
        'HPY_Since_Joining_Date': this.addform.HPY_Since_Joining_Date,
        'sort': this.addform.sort,

      };

      // 遍历对象并只添加有效字段
      Object.entries(fields).forEach(([key, value]) => {
        // 判断字段值是否为空、null或undefined
        if (value !== undefined && value !== null && value !== '') {
          data.append(key, value);
        }
      });

      if (this.roleHeadgear) {
        data.append('Price_Movement', this.roleHeadgear);
      }


      const res = await adjustViewEdit(data, this.addform.id).catch((err) => {
        return console.error(err);
      });
      if (res && res.status == "200") {
        this.$message.success(res.data.message);
        this.dialogVisible = false
        this.get_adjustTheViewingList()
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 刪除股票调整记录
    async del_adjustViewDelete(id) {
      try {
        await this.$confirm("是否继续执行操作？", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        });

        const res = await adjustViewDelete(id).catch((err) => {
          return console.error(err);
        });

        if (res && res.status == "200") {
          this.$message.success(res.data.message);
          this.dialogVisible = false;
          this.get_adjustTheViewingList();
        } else {
          this.$message.error(res.data.message);
        }
      } catch (error) {
        // 用户点击取消或关闭对话框
        console.error(error);
      }
    },
    // 关闭弹窗时
    handleClose() {
      this.addform = {
        Stocks: '',
        Current_Price: '',
        Adjustment_Date: '',
        Buy_or_Sell: '',
        Volumn: '',
        HPY_Since_Joining_Date: '',
        sort: '',

      }

    },
    handleClosetable() {

    },
    // 分页
    current_change(currentPage) {
      this.currentPage = currentPage;
      this.get_adjustTheViewingList();
    },
    // 重置
    resetForm() {
      this.form = {
        admin_name: ''
      }
      this.currentPage = 1
      this.get_adjustTheViewingList();
    },
    // 编辑打开时
    tableEditing(row) {
      this.titles = '编辑'
      this.dialogVisible = true
      const isTrue = (value) => {
        if (value == null || value == undefined || value === "null" || value === "undefined") {
          return false;
        }
        return true;
      };
      if (isTrue(row.Stocks)) {
        this.addform.Stocks = row.Stocks
      }
      if (isTrue(row.Current_Price)) {
        this.addform.Current_Price = row.Current_Price
      }
      if (isTrue(row.Adjustment_Date)) {
        this.addform.Adjustment_Date = row.Adjustment_Date
      }
      if (isTrue(row.HPY_Since_Joining_Date)) {
        this.addform.HPY_Since_Joining_Date = row.HPY_Since_Joining_Date
      }
      if (isTrue(row.Buy_or_Sell)) {
        this.addform.Buy_or_Sell = row.Buy_or_Sell
      }
      if (isTrue(row.Volumn)) {
        this.addform.Volumn = row.Volumn
      }
      if (isTrue(row.sort)) {
        this.addform.sort = row.sort
      }

      this.addform.id = row.recent_adjustment_id
    },
    // 新增打开时
    addbtn() {
      this.dialogVisible = true;
      this.titles = '新增'
    },
  },
};
</script>
<style>
.cell {
  font-size: 12px;
  white-space: nowrap !important;
}

.el-dialog__body {
  padding: 0 10px !important;
}

.demo-table-expand {
  font-size: 0;
  margin-left: 10px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<style lang="less" scoped>
.DealerInfoStyle {
  width: 100%;
  padding: 0 10px;
  // background-color: aquamarine;
  height: calc(100vh - 100px);
  // border: 1px #000 solid;

  .cardAdmin {
    position: relative;
    // height: 18%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;

    border: #ebeef5 solid 1px;
    padding: 0 5px;
    margin-bottom: 2px;


    .formContainer {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      align-self: baseline;
      padding-bottom: 40px;
    }

    .formSearch {
      width: 25%;
      min-width: 25%;
      margin: 10px 0;
      height: 40px;
      display: flex;
      justify-content: center;
    }
  }

  .pop-up-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    align-self: baseline;
    margin: 10px 0;
    justify-content: center;
    padding-right: 15px;

    .form-options {
      width: 100%;
      min-width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      margin: 10px 0;
    }
  }
}
</style>
